<?php
header("Content-type:text/html;charset=utf-8");
include_once 'commonDB.php';
	?>
	<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				border: 0;
			}
			
			body {
				background-color: rgb(249, 241, 239);
			}
			
			.wrap {
				width: 100%;
				height: 100%;
			}
			/*导航栏--------------------------------------------------------------*/
			
			#navigation {
				width: 100%;
				height: 50px;
				background-color: rgba(29, 29, 29, 0.9);
				position: relative;
				z-index: 1;
			}
			
			#nav {
				width: 1000px;
				height: 100%;
				margin: 0 auto;
				overflow: hidden;
			}
			
			#nav_log {
				width: 25%;
				height: 100%;
				float: left;
			}
			
			#nav_junp {
				width: 40%;
				height: 100%;
				float: left;
				overflow: hidden;
			}
			
			#nav_junp>div {
				width: 20%;
				height: 100%;
				float: left;
			}
			
			#nav_load {
				width: 35%;
				height: 100%;
				float: right;
				overflow: hidden;
			}
			
			#nav_load>div {
				width: 50%;
				height: 100%;
				float: left;
			}
			
			#grapes_hover {
				width: 100%;
				position: absolute;
				overflow: hidden;
				background-color: white;
				z-index: 3;
			}
			
			#keepout {
				width: 1000px;
				height: 200px;
				margin-left: auto;
				margin-right: auto;
				display: none;
				overflow: hidden;
			}
			
			#keepout>div {
				width: 15%;
				height: 100%;
				float: left;
				position: relative;
			}
			
			#keepout>div>a>img {
				position: absolute;
				top: 10%;
				left: 11%;
				width: 75%;
				height: 55%;
				padding: 0 20px 0 0;
				border-right: 2px solid #ccc;
			}
			/*购买---------------------------------------------*/
			
			.buy_bg {
				width: 100%;
				height: 40px;
				background-color: rgba(230, 230, 230, 0.8);
				position: relative;
				z-index: 1;
				top: 0;
			left: 0;
			}
			
			.buy {
				width: 1000px;
				height: 100%;
				margin: 0 auto;
				line-height: 40px;
				overflow: hidden;
			}
			
			.buy_text1 {
				color: grey;
				float: left;
			}
			
			.buy_text2 {
				color: grey;
				font-size: 14px;
				float: right;
				cursor: pointer;
			}
			
			.buy_text3 {
				width: 100px;
				height: 30px;
				text-align: center;
				font-size: 14px;
				color: white;
				cursor: pointer;
				border-radius: 5px;
				background-color: rgb(117, 113, 206);
				float: right;
				line-height: 30px;
				margin-top: 5px;
				margin-left: 40px;
			}
			
			.buy_text3:hover {
				background-color: rgb(151, 145, 230);
			}
			
			.part_one {
				width: 1000px;
				margin: 0 auto;
			}
			
			.one_bg {
				left: 50%;
				top: 50px;
				margin-left: -800px;
			}
			
			.pic_one {
				width: 2560px;
				height: 500px;
				background: url(img/2Q==5464555.jpg) no-repeat;
				background-size: 100% 100%;
			}
			
			.pic_two {
				width: 2560px;
				height: 540px;
				background: url(img/2Q==34661.jpg) no-repeat;
				background-size: 100% 100%;
			}
			
			.border1 {
				width: 1000px;
				height: 500px;
				left: 50%;
				margin-left: 800px;
				text-align: center;
			}
			
			.text_big {
				margin-top: 80px;
				font-size: 80px;
				line-height: 160px;
				text-align: center;
			}
			
			.text_middle {
				font-size: 70px;
				line-height: 120px;
				text-align: center;
			}
			
			.text_small {
				font-size: 40px;
				line-height: 70px;
				text-align: center;
			}
			
			.video {
				width: 1000px;
				height: 500px;
				background: url(img/hnhy.jpg) no-repeat;
				background-size: 100% 100%;
				margin: 100px 0 50px;
				text-align: center;
				line-height: 500px;
			}
			
			.video img {
				width: 80px;
				height: 80px;
			}
			
			.part_two {
				width: 100%;
				/*height: 1100px;*/
				background-color: rgb(255, 255, 255);
			}
			
			.content_two {
				/*border: 1px solid red;*/
				width: 1000px;
				margin: 0 auto;
				padding-top: 60px;
			}
			
			.part_two_text1,
			.part_two_text2,
			.part_two_text3,
			.part_two_text4 {
				width: 210px;
				height: 70px;
				font-size: 40px;
				text-align: center;
				line-height: 70px;
				border: 2px dashed rgb(138, 91, 160);
				border-radius: 10px;
				float: left;
				margin: 18px;
			}
			
			.content_two img {
				width: 1000px;
				margin-top: 100px;
				margin-bottom: 100px;
			}
			
			.part_three {
				/*border: 1px solid red;*/
				width: 1000px;
				margin: 0 auto;
			}
			
			.content_three {
				width: 1000px;
				margin: 40px auto 0;
				overflow: hidden;
			}
			
			.part_three_text {
				float: right;
				text-align: right;
			}
			
			.part_three_text1,
			.part_three_text2 {
				font-size: 40px;
				color: rgb(110, 64, 137);
				margin: 40px 0;
			}
			
			.part_three_text3 {
				font-size: 30px;
				line-height: 50px;
			}
			
			.pic_three>img:nth-child(1) {
				margin-left: -500px;
				margin-top: -590px;
				width: 1000px;
			}
			
			.pic_three>img:nth-child(2) {
				margin-left: 130px;
				margin-top: -590px;
				width: 1000px;
			}
			
			.part_add {
				width: 100%;
				/*height: 1100px;*/
				background-color: rgb(255, 255, 255);
			}
			
			.content_add {
				/*border: 1px solid red;*/
				width: 1000px;
				margin: 0 auto;
				padding-top: 60px;
			}
			
			.part_add_text1 {
				font-size: 40px;
				color: rgb(110, 64, 137);
				margin: 40px 0;
			}
			.part_add_text2 {
				font-size: 28px;
				line-height: 50px;
			}
			#add_pic1 {
				width: 900px;
				margin-left: -200px;
				margin-top: 200px;
				margin-bottom: 20px;
			}
			#add_pic2 {
				float: right;
				width: 800px;
				margin-right: -200px;
				margin-top: -700px;
			}
			.part_four {
				width: 100%;
				/*height: 1784px;*/
			}
			
			.content_four {
				width: 1000px;
				margin: 0 auto;
				position: relative;
				border: 1px solid transparent;
			}
			
			.part_four_text {
				margin: 80px 0 0 0;
			}
			
			.part_four_text1 {
				font-size: 40px;
				color: rgb(110, 64, 137);
			}
			
			.part_four_text2 {
				width: 220px;
				height: 70px;
				font-size: 35px;
				text-align: center;
				line-height: 70px;
				border: 1px dashed rgb(138, 91, 160);
				border-radius: 10px;
				margin: 50px 0;
			}
			
			.part_four_text3 {
				line-height: 30px;
				font-size: 25.5px;
			}
			
			#pic1 {
				width: 700px;
				margin-top: 50px;
			}
			
			#pic2 {
				width: 1000px;
				margin-top: -180px;
			}
			
			#pic3 {
				width: 740px;
				position: absolute;
				top: 460px;
				left: 20px;
			}
			
			.ipad {
				font-size: 27px;
				color: rgb(119, 119, 119);
				text-align: center;
				margin: 100px 0;
			}
			
			.part_five {
				width: 100%;
				background-color: white;
			}
			
			.five_middle {
				width: 1000px;
				margin: 0 auto;
				overflow: hidden;
			}
			
			.five_middle>img {
				float: left;
				width: 2200px;
				margin-left: -600px;
			}
			
			.five_text1 {
				font-size: 40px;
				color: rgb(110, 64, 137);
				margin-top: 100px;
			}
			
			.five_text2 {
				font-size: 25px;
				line-height: 40px;
				margin-top: 30px;
				margin-bottom: 100px;
			}
			
			.part_six {
				width: 1000px;
				margin: 0 auto;
			}
			
			.six_bg {
				left: 50%;
				top: 50px;
				margin-left: -800px;
			}
			
			.pic_six {
				width: 2600px;
				height: 800px;
				background: url(img/Zuyu.jpg) no-repeat;
				background-size: 100% 100%;
				position: relative;
			}
			
			.six_text {
				width: 900px;
				margin: 0 auto;
				font-size: 25px;
				line-height: 40px;
				padding-top: 200px;
			}
			
			.part_seven {
				width: 100%;
				background-color: rgb(72, 206, 189);
				position: relative;
				z-index: 1;
			}
			
			.seven_middle {
				width: 1000px;
				margin: 0 auto;
			}
			
			.seven_middle>img {
				margin-top: -150px;
			}
			
			.seven_text {
				margin-top: 66px;
				float: right;
			}
			
			.seven_text1,
			.seven_text2,
			.seven_text3 {
				font-size: 28px;
				line-height: 60px;
				color: white;
			}
			
			.tubiao {
				margin-top: 80px;
				margin-right: 30px;
				float: right;
			}
			/*页脚---------------------------------------------------*/
			
			#abyejiaoly {
				width: 100%;
				height: 220px;
				background-color: whitesmoke;
			}
			
			footer {
				width: 1000px;
				height: 100%;
				overflow: hidden;
				margin-left: auto;
				margin-right: auto;
			}
			
			#footer_left {
				width: 20%;
				height: 80%;
				float: left;
				border-bottom: 1px solid #CCCCCC;
			}
			
			#footer_middle {
				width: 60%;
				height: 80%;
				float: left;
				overflow: hidden;
				border-bottom: 1px solid #CCCCCC;
			}
			
			#footer_middle>div {
				width: 20%;
				height: 100%;
				float: left;
			}
			
			#footer_right {
				width: 20%;
				height: 80%;
				float: right;
				border-bottom: 1px solid #CCCCCC;
			}
			
			#footer_middle>div>a:hover {
				color: mediumpurple;
			}
			/*视频----------------------------*/
			
			.video_bg {
				width: 100%;
				height: 100%;
				position: fixed;
				left: 0;
				top: 0;
				z-index: 99;
				background-color: rgba(0, 0, 0, 0.4);
				display: none;
			}
			
			#video {
				margin: 150px auto;
			}
			/*滚到头-------------------------------------*/
			
			.back {
				position: fixed;
				right: 20px;
				bottom: 20px;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<!--导航-->
			<div id="navigation">
				<!--让导航居中-->
				<div id="nav">
					<!--导航logo-->
					<div id="nav_log" class="nav_log">
						<a id="navloga" href="putou.php"><img class="nav_log_img" src="img/nav_logo.gif" /></a>
					</div>
					<div id="nav_junp" class="nav_jump">
						<!--首页-->
						<div><a id="first" href="putou.php">首页</a></div>
						<!--葡萄产品-->
						<div><a id="grapes" href="###">葡萄产品</a></div>
						<!--葡萄纬度-->
						<div><a id="latitude" href="latitude.php">葡萄纬度</a></div>
						<!--APP下载-->
						<div><a id="APPdownload" href="APP.php">APP下载</a></div>
						<!--嘉年华-->
						<div><a id="carnival" href="JNH.php">嘉年华</a></div>
					</div>
					<div id="nav_load" class="nav_load">
						<!--登陆-->
						<div><a id="load" href="denglu.php">登陆</a></div>
						<!--注册-->
						<div><a id="registered" href="zhuce2.php">注册</a></div>
					</div>
				</div>
			</div>
			<!--隐藏-->
			<div id="grapes_hover">
				<div id="keepout">
					<?php
                         $sql = "select * from putao_chanpin order by id desc limit 6";
                         $result = mysql_query($sql);
                       while ($row =mysql_fetch_assoc($result)) {
                       ?>
                       <div><a href="<?php echo $row["href"]; ?>"><img src="<?php echo $row["scr"]; ?>"/><?php echo $row["txt"]; ?></a></div>
                    
                       <?php } ?>
				</div>
			</div>
			<!--购买------------>
			<div class="buy_bg">
				<div class="buy">
					<div class="buy_text1">哈泥海洋</div>
					<div class="buy_text3">立即购买</div>
					<div class="buy_text2">概述</div>
				</div>
			</div>
			<div class="middle">
				<div class="part_one">
					<div class="one_bg">
						<div class="pic_one">
							<div class="border1"><img src="img/hnhy-logo.png" /></div>
						</div>
						<div class="pic_two">
							<div class="border1"><img src="img/hnhy1-3.png" /></div>
						</div>
					</div>
					<h1 class="text_big">葡萄探索号之哈泥海洋</h1>
					<div class="text_middle">潜入想象力的海洋</div>
					<div class="text_small">探索海洋世界，<br /> 和各类真实还原的海洋生物进行对话与互动，
						<br /> 由孩子们亲手创造出的鱼儿来传递海洋中的众多科普知识
						<br />
					</div>
					<div class="video"><img src="img/bofang.png" /></div>
				</div>
				<div class="part_two">
					<div class="content_two">
						<div class="part_two_text">
							<div class="part_two_text1">八色哈哈泥</div>
							<div class="part_two_text2">哈哈泥模具</div>
							<div class="part_two_text3">小帮手工具</div>
							<div class="part_two_text4">制作工程台</div>
						</div>
						<img src="img/hnhy4-1.png" />
					</div>
				</div>
				<div class="part_three">
					<div class="content_three">
						<div class="part_three_text">
							<div class="part_three_text1">使用铂金硅胶 </div>
							<div class="part_three_text2">安全可靠</div>
							<div class="part_three_text3">是一种没有气味不含塑化剂的硅胶，<br /> 符合美国FDA食品接触材料要求，
								<br /> 即食品容器级别，
								<br /> 无毒无害安全健康，
								<br /> 更是儿童奶嘴的制作原材料；
								<br /> 所有硅胶都为圆角设计，柔软舒适，
								<br /> 也可随意洗涤，弄脏了也不怕
							</div>
						</div>
					</div>
					<div class="pic_three"><img src="img/hnhy5-1.png" /><img src="img/hnhy5-2.png" /></div>
				</div>
				<div class="part_add">
					<div class="content_add">
						<div class="part_add_text">
							<div class="part_add_text1">八色哈哈泥</div>
							<div class="part_add_text2">是一种超轻黏土类塑形材料，该黏土通过欧盟EN71-3测试，<br /> 无重金属危害，安全健康，
								<br /> 黏土轻柔舒适，操作起来不粘手。
								<br /> 哈泥海洋通过中国3C认证。
							</div>
						</div>
						<img id="add_pic1" src="img/hnhy6-1.png"/>
						<img id="add_pic2" src="img/hnhy6-2-1.png" />
					</div>
				</div>
				<div class="part_four">
					<div class="content_four">
						<div class="part_four_text">
							<div class="part_four_text1">重新定义孩子学习和游戏的方式</div>
							<div class="part_four_text2">运用AR技术</div>
							<div class="part_four_text3">孩子的“哈哈泥”作品模型可以完整的同步映射到游戏环境之中，实现真正的同步互动
							</div>
						</div>
						<img id="pic1" src="img/mss6-1.png" />
						<img id="pic2" src="img/hnhy7-1.png" />
						<img id="pic3" src="img/hnhy7-2.png" />
						<div class="ipad">＊本产品不含iPad，葡萄探索号底座及反射镜则需额外购买</div>
					</div>
				</div>
				<div class="part_five">
					<div class="five_middle">
						<img src="img/2Q==564161.jpg" />
						<img src="img/2Q==445.jpg" />
						<img src="img/9k=2516312.jpg" />
						<div class="five_text1">哈泥海洋</div>
						<div class="five_text2">通过和各类由儿童亲手制作并真实还原的海洋生物进行对话和互动，并触发剧情，随着小 朋友制作出更多品种和颜色的生物，海洋将越来越有个性和生命力
						</div>
					</div>

				</div>
				<div class="part_six">
					<div class="six_bg">
						<div class="pic_six">
							<div class="six_text">尽情发挥色彩想象力，学习海洋知识，增强动手能力；<br /> 让孩子们创造一个属于自己的海洋世界吧
							</div>
						</div>
					</div>
				</div>
				<div class="part_seven">
					<div class="seven_middle">
						<img src="img/hnhy12-2.png" />
						<div class="seven_text">
							<div class="seven_text1">学习丰富海洋知识</div>
							<div class="seven_text2">提升孩子动手能力</div>
							<div class="seven_text3">培养爱护自然的性格</div>
						</div>
						<div class="tubiao"><img src="img/56561456156145.png" /></div>
					</div>
				</div>
			</div>
			<!--页脚--------------------------------------->
			<div id="abyejiaoly">
				<footer>
					<div id="footer_left">

					</div>
					<div id="footer_middle">
						<div>
							<h4>订单中心</h4>
							<a href="###">售后政策</a>
							<a href="###">配送常见问题</a>
							<a href="###">支付方式</a>
							<a href="###">支付常见问题</a>
							<a href="###">购物指南</a>
						</div>
						<div>
							<h4>服务支持</h4>
							<a href="###">配送方式</a>
							<a href="###">隐私政策</a>
							<a href="###">账户常见问题</a>
							<a href="###">淘淘向右走常见问题</a>
							<a href="###">班德瑞使用常见问题</a>
						</div>
						<div>
							<h4>商务合作</h4>
							<a href="###">商务合作</a>
						</div>
						<div>
							<h4>关于葡萄</h4>
							<a href="###">关于葡萄</a>
							<a href="###">联系我们</a>
						</div>
						<div>
							<h4>关于我们</h4>
							<a href="###">葡萄纬度</a>
						</div>
					</div>
					<div id="footer_right">
						<a href="###"><img src="img/btn_consult_qq@2x.png" /></a>
						<a href="###"><h2>400-651-6161</h2></a>
					</div>
					<h6>Copyright © 2016, Shanghai Putao Technology Co., Ltd. All Rights Reserved. 上海葡萄纬度科技有限公司</h6>
					<a href="###">沪IC备15015904号-3</a>
				</footer>
			</div>
			<div class="video_bg">
				<div id="video" style="width:862px;height:577px;display: block">
					<object type="application/x-shockwave-flash" data="http://player.youku.com/player.php/sid/XMTU3NjYxOTMxMg==/isAutoPlay/false/isShowRelatedVideo/false/partnerid/5c30db50b42ae8c4/v.swf" width="100%" height="100%" id="youku-player">
					<param name="allowFullScreen" value="true">
					<param name="allowScriptAccess" value="always">
					<param name="movie" value="http://player.youku.com/player.php/sid/XMTU3NjYxOTMxMg==/isAutoPlay/false/isShowRelatedVideo/false/partnerid/5c30db50b42ae8c4/v.swf">
					</object>
				</div>
			</div>

			<!--滚到头------------------------------------------------>
			<div class="back"><img src="img/gun.png" /></div>
		</div>
	</body>
	<script src="js/tween.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var grapeshover = document.querySelector("#grapes_hover");
		var grapesdiv = document.querySelector("#nav_junp>div:nth-child(2)");
		var keepout = document.querySelector("#keepout");
		var video = document.querySelector(".video");
		var video_bg = document.querySelector(".video_bg");
		var t = 0;
		var timer = null;
		//导航栏--------------------------------------------------------------------
		grapesdiv.onmouseover = function() {
			timer = setInterval(function() {
				if (t < 200) {
					t += 20;
				}
				grapeshover.style.height = t + "px";
				keepout.style.display = "block";
			}, 50)
		}
		grapesdiv.onmouseout = function() {
			clearInterval(timer);
			t = 0;
			grapeshover.style.height = t + "px";
			keepout.style.display = "none";
		}

		keepout.onmouseover = function() {
			t = 200;
			keepout.style.display = "block";
			grapeshover.style.height = t + "px";
		}
		keepout.onmouseout = function() {
				t = 0;
				keepout.style.display = "none";
				grapeshover.style.height = t + "px";
			}
			//滚轮滚到顶部
		var back = document.querySelector(".back");
		var timer = null;
		back.onclick = function() {
			// scrollTop 滚到头属性 设置为0时 滚动到顶部
			//			alert(document.body.scrollTop);
			//			document.body.scrollTop = 0;
			clearInterval(timer);
			// DTD模式下不能直接使用body
			// 使用documentElement
			var start = document.body.scrollTop || document.documentElement.scrollTop;
			//			var end = 0;
			var change = 0 - start;
			var t = 0;
			var d = 20;
			timer = setInterval(function() {
				t++;
				if (t >= d) {
					clearInterval(timer);
				}
				var speed = Tween.Back.easeOut(t, start, change, d);
				// 区分模式
				if (document.body) {
					document.body.scrollTop = speed;
				} else {
					document.docuemntElement.scrollTop = speed;
				}
			}, 30);

		}
		video.onclick = function() {
			video_bg.style.display = "block";
		}
		video_bg.onclick = function() {
			video_bg.style.display = "none";
		}
		
		var buy_bg = document.querySelector(".buy_bg");
		$(function  () {
			$(window).scroll(function  () {
				var sclTop = $(window).scrollTop();
				if (sclTop >= 50) {
					buy_bg.style.position = "fixed";
				}else if (sclTop <= 50) {
					buy_bg.style.position = "";
				}
				
				
			})
		})
	</script>

</html>